<template>
  <div class="ss-root">
    <el-form :model="setting" ref="setting" label-width="140px" class="bjs-form" style="margin: 0 30px;">

      <el-form-item label="截图黏贴结果 ">
        <el-radio-group size="mini" v-model="setting.ssResultType" @change="ssResultTypeHandler">
          <el-radio-button class="bjs-radio url"      label="1"><i class="iconfont icon-url"/></el-radio-button>
          <el-radio-button class="bjs-radio markdown" label="2"><i class="iconfont icon-markdown1"/></el-radio-button>
          <el-radio-button class="bjs-radio picture"  label="3"><i class="iconfont icon-picture1"/></el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="修改截图名称 ">
        <el-switch
            class="bjs-switch"
            v-model="setting.isSsChangeName"
            @change="ssChangeNameStateHandler"
        ></el-switch>
      </el-form-item>

      <el-form-item label="Boss盾路径(Alt+V)">
        <el-input class="bjs-input" v-model="bossShieldImageValue" @input="bossShieldHandler"></el-input>
      </el-form-item>

      <el-form-item>
        <img class="boss-shield-preview" :src="bossShieldImage"  alt="">
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "screenshot",
  data () {
    return {
      setting: {
        defaultPath: '',
        ssResultType: '',
        isSsChangeName: ''
      },
      bossShieldImageValue: ''
    }
  },
  computed: {
    theme () {return this.$store.state.config.theme.type},
    bossShieldImage () {
      return this.$store.state.config.bossShield.image
    }
  },
  methods : {
    ssResultTypeHandler () {
      this.$store.commit('SET_SCREENSHOT_RESULT_TYPE',this.setting.ssResultType)
      this.$emit('refresh', null)
    },
    ssChangeNameStateHandler () {
      this.$store.commit('SET_SCREENSHOT_CHANGE_NAME',this.setting.isSsChangeName)
      this.$emit('refresh', null)
    },
    bossShieldHandler (val) {
      if (val) {
        this.$store.commit('SET_BOSS_SHIELD_IMAGE',val)
      }
    },
    init () {
      this.setting.ssResultType   = this.$store.state.config.screenshot.resultType
      this.setting.isSsChangeName = this.$store.state.config.screenshot.changeNameState
      this.bossShieldImageValue   = this.$store.state.config.bossShield.image
    }
  }
}
</script>

<style scoped lang="scss">
  .ss-root {
    .url /deep/ .el-radio-button__inner {
      padding: 5px 12px;
    }
    .markdown /deep/ .el-radio-button__inner {
      padding: 1px 8px;
    }
    .picture /deep/ .el-radio-button__inner {
      padding: 5px 10px;
    }
  }

  .boss-shield-preview {
    width: 300px;
  }

</style>
